<template>
	<view class="content">
		<view class="top_box">
			<view class="top1 flexs2">
				<image class="up_img" src="../../static/img/@dfsedfes.png" mode="" @click="picture.allblack()"></image>
				<view class="titles">我的会员</view>
				<view class="status"></view>
			</view>
			<view class="info_box">
				<view class="info_avatar">
					<image :src="picture.getImgUrl(userinfoVip.avatar)" mode=""></image>
				</view>
				<view class="info_left">
					<view class="info_name">{{userinfoVip.nickname}}</view>
					<view class="info_time">{{userinfoVip.vip_overtime}}</view>
				</view>
			</view>
			<view class="right_box">
				<view class="right_item">
					<image src="../../static/img/@idnfefdfe.png" mode=""></image>
					<view>会员专属折扣</view>
				</view>
				<view class="line"></view>
				<view class="right_item">
					<image src="../../static/img/@dfefdfd.png" mode=""></image>
					<view>敬请期待</view>
				</view>
			</view>
		</view>
		<view class="list_box">
			<view class="list_title">会员开通</view>
			<view class="list_item_box">
				<view class="list_item " :class="openvipindex==1?'chooseactive':''" @click="openvip(1,1)">
					<view class="list_item_name">月会员</view>
					<view class="list_item_money">
						￥<span>1</span>
					</view>
				</view>
				
				<view class="list_item " :class="openvipindex==2?'chooseactive':''" @click="openvip(2,2)">
					<view class="list_item_name" >年会员</view>
					<view class="list_item_money">
						￥<span>2</span>
					</view>
				</view>
			</view>
		</view>
		<view class="list_btn" @click="newopen()">开通会员</view>
	</view>
</template>

<script>
	import {getuserinfo} from '../../api/personal.js'
	export default {
		data() {
			return {
				// userinfo: [1],
				openvipindex:1,
				token:'',
				userinfoVip:[],
				//金额
				moneynum:0
			}
		},
		onLoad() {
			//查询会员
			this.getUser()
			this.openvip(1,1)
		},
		methods: {
			openvip(id,Num){
				console.log(id)
				this.openvipindex = id
				this.moneynum = Num
			},
			getUser(){
				this.token = uni.getStorageSync('token')
				getuserinfo(this.token).then((res)=>{
					this.userinfoVip = res.data
				})
			},
			//开通会员
			newopen(){
				uni.navigateTo({
					url:`../payment/payment?price=${this.moneynum}&type=${this.openvipindex}&payment=true`
				})
			}
			
		}
	}
</script>

<style scoped lang="scss">
	.content {
		width: 100%;
		height: 100%;
		overflow-y: auto;

		.top_box {
			height: 392rpx;
			width: 100%;
			background-image: url(../../static/img/wdqb_img_bg@2x.757d31a1.png);
			background-size: 100% 100%;

			//position: relative;
			.top1 {
				width: 100%;
				height: 88rpx;
				padding: 26rpx;

				.up_img {
					width: 20rpx;
					height: 36rpx;
				}

				.titles {
					font-size: 34rpx;
					color: #fff;
				}
			}

			.info_box {
				width: 100%;
				height: 200rpx;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				padding: 0 0 0 30rpx
					/* border:1px solid red */
				;

				.info_avatar {
					image {
						width: 120rpx;
						height: 120rpx;
						border-radius: 50%;
					}
				}

				.info_left {
					width: 400rpx;
					margin-left: 40rpx;
					height: 90rpx;
					display: flex;
					justify-content: space-between;
					align-items: flex-start;
					flex-direction: column;

					.info_name {
						height: 30rpx;
						font-size: 32rpx;
						font-family: PingFang SC;
						font-weight: 700;
						color: #fff;
					}

					.info_time {
						font-size: 12px;
						font-family: PingFang SC;
						font-weight: 500;
						color: #fff;
					}
				}
			}

			.right_box {
				left: calc(50% - 346rpx);
				position: absolute;
				width: 92%;
				height: 140rpx;
				background: #fff;
				box-shadow: 0 1px 16rpx 0 #eee;
				border-radius: 10rpx;
				margin: auto;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.right_item {
					width: 50%;
					height: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;

					image {
						width: 60rpx;
						height: 60rpx;
					}
				}

				.line {
					width: 1px;
					height: 100rpx;
					opacity: .5;
					background-color: #d9d9d9;
				}
			}

		}

		.list_box {
			width: 92%;
			height: 320rpx;
			margin: auto;
			margin-top: 100rpx;

			.list_title {
				width: 100%;
				height: 90rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 700;
				color: #333;
			}

			.list_item_box {
				width: 100%;
				height: 214rpx;
				display: flex;
				justify-content: flex-start;
				align-items: center;

				.list_item {
					width: 214rpx;
					height: 214rpx;
					/* background: #FFFAE6; */
					border: 1px solid #ccc;
					border-radius: 10rpx;
					margin-right: 20rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;
					.list_item_name{
							font-size: 34rpx;
						    font-family: PingFang SC;
						    font-weight: 500;
						    color: #333;
					}
					.list_item_money{
							font-size: 28rpx;
						    font-family: PingFang SC;
						    font-weight: 700;
						    color: #ff4145;
						span{
							font-size: 54rpx;
						}
					}
				}

				.chooseactive {
					width: 214rpx;
					height: 214rpx;
					background: #fffae6;
					border: 1px solid #ffdd47;
					border-radius: 10rpx;
				}
			}
		}
		.list_btn{
				width: 86%;
			    height: 88rpx;
			    background: #ffdd47;
			    border-radius: 10rpx;
			    position: absolute;
			    bottom: 3%;
			    left: 6.7%;
			    display: flex;
			    justify-content: center;
			    align-items: center;
			    font-size: 30rpx;
			    font-weight: 500;
			    color: #333;
		}
	}
</style>
